{% extends "base.html" %}

{% block content %}

<script>
    function LogButton() {
        var d = new Date();
        var height = 600;
        var width = 900;
        var top = (screen.height - height) / 2;
        var left = (screen.width - width) / 2;
        window.open("{{ url_for('logs') }}?log=farming", 'Chia Log', 'resizeable=yes,scrollbars=yes,height=' + height + ',width=' + width + ',top=' + top + ',left=' + left).focus();
    }
    function CheckButton() {
        var d = new Date();
        var height = 600;
        var width = 900;
        var top = (screen.height - height) / 2;
        var left = (screen.width - width) / 2;
        window.open("{{ url_for('plots_check') }}", 'Plots Check', 'resizeable=yes,scrollbars=yes,height=' + height + ',width=' + width + ',top=' + top + ',left=' + left).focus();
    }
    function PlotJobAnalyze(plot) {
        var output = document.getElementById('plotAnalyzeContent');
        var xhr = new XMLHttpRequest();
        xhr.open('GET', "{{ url_for('farming') }}?analyze=" + plot);
        xhr.send();
        xhr.onload = function () {
            output.textContent = xhr.responseText;
        };
    }
</script>

<div class="position-relative">
    <div class="position-absolute top-0 end-0">
        <a href="#" title="View Logs" onclick='LogButton();return false;'>
            <i class="fs-4 bi-text-indent-left"></i>
        </a>
    </div>
</div>

<header class="pb-3 mb-4 border-bottom">
    <span class="fs-4">Farming Status: {{ farming.display_status }}</span>
</header>

<div class="modal fade" id="analyzeModal" tabindex="-1" aria-labelledby="analyzeModalLabel" aria-hidden="true">
    <div class="modal-dialog bg-dark rounded-3 modal-lg">
        <div class="modal-content bg-dark">
            <div class="modal-header bg-dark">
                <h5 class="modal-title" id="analyzeModalLabel">Plotting Analysis</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body bg-dark">
                <p>Analysis of the plotting job log shows time (seconds) spent in each phase:</p>
                <pre id="plotAnalyzeContent"></pre>
            </div>
        </div>
    </div>
</div>

<div>
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
    {% if category == 'message' %}
    <div class="alert alert-warning" role="alert">
        {% else %}
        <div class="alert alert-{{ category }}" role="alert">
            {% endif %}
            {{ message|safe }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}
    </div>

    <form class="d-flex" method="POST" style="padding-bottom:5px; width:100%" id="main-form">
        <div style="width: 100%;">
            <button class="btn btn-outline-success text-nowrap align-baseline" type="submit" name="action" value="add"
                id="btnCheck" form="main-form" style="float: right; margin: 0px 5px 0px 0px"
                onclick='CheckButton();return false;'>Check Plots</button>
            <h5 style="width: 100%; padding-top: 7px;">
                {% if global_config.plotting_only %}
                Found {{ plots.rows | length }} total plots.
                {% else %}
                Found {{ farming.plot_count }} total plots.
                Current expected time to win: <span class="text-success">{{ farming.time_to_win }}</span>
                {% endif %}
            </h5>
        </div>
    </form>

    <div class="table-responsive">
        <table class="table table-dark">
            <thead>
                <tr>
                    {% for column in plots.columns %}
                    <th scope="col" class="text-success">{{ column }}</th>
                    {% endfor %}
                    <th scope="col" class="text-success"></th>
                </tr>
            </thead>
            <tbody>
                {% for row in plots.rows %}
                <tr>
                    {% for column in plots.columns %}
                    {% if column == "size" %}
                    <td>{{ row[column] | bytesfilter}}</td>
                    {% elif column == "plot" %}
                    <td>{{ row[column] | plotnameshortener}}</td>
                    {% else %}
                    <td>{{ row[column] }}</td>
                    {% endif %}
                    {% endfor %}
                    <td class="align-middle" style="padding:0px 5px 0px 0px">
                        <!-- Careful, VS Code likes to format a space into 'plot' quotes for some reason -->
                        <a href="#" title="Analyze Plotting Job" data-bs-toggle="modal" data-bs-target="#analyzeModal" \
                            onclick='PlotJobAnalyze("{{ row['plot'] }}");return false;'>
                            <i class="fs-4 bi-stopwatch"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% endblock %}